<template>
  <div class="box">
    <h2>关于25年度XXXX事件</h2>
    <el-row>
      <el-col :xs="24" :lg="12" id="foundation-col">
        <el-card class="finish-card">
          <el-col :span="24">
            <el-form ref="form" :model="form" label-width="80px">
              <el-col :span="12">
                <el-form-item label="创建人">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间">
                  <el-input v-model="form.data"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="截至时间">
                  <el-date-picker style="width: 100%" v-model="form.olddata" type="date" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="汇报频次">
                  <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 100%">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="标题">
                  <el-input v-model="form.title"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="任务内容">
                  <el-input type="textarea" :autosize="{ minRows: 15, maxRows: 15 }" v-model="form.desc"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </el-col>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="12" id="finish-col">
        <el-card class="finish-card">
          <el-form ref="form" :model="form" label-width="80px">
            <el-col :span="12">
              <el-form-item label="是否完结">
                <el-radio-group v-model="form.resource">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="完成比例">
                <el-input placeholder="请输入内容" v-model="form.input2">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="情况描述">
                <el-input type="textarea" :autosize="{ minRows: 20, maxRows: 20 }" v-model="form.desc1"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <div class="btn-group">
      <el-button type="primary" @click="oldSave">暂存</el-button>
      <el-button type="primary" @click="oldSubt">提交</el-button>
    </div>
    <el-col :span="24">
      <el-divider>历史记录</el-divider>
    </el-col>
    <el-table :data="tableData" style="width: 100%" height="250" border>
      <el-table-column fixed="left" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button @click="ReviseClick(scope.row)" type="text" size="small">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="dept" label="登记日期" min-width="120" align="center"> </el-table-column>
      <el-table-column prop="name" label="完成比例" min-width="120" align="center"> </el-table-column>
      <el-table-column prop="desc1" label="情况描述" min-width="300"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'FillPage2',
  data() {
    return {
      form: {
        name: '张XX',
        data: '2025-04-30',
        olddata: '2025-12-31',
        region: '月',
        title: '关于25年度XXXXXX',
        desc: '请各部门说明XXXX进展情况',
        resource: '否',
        input2: '20',
        desc1: '5月中旬，我部门XXXXXXXXXXXX'
      },
      tableData: [
        {
          dept: '2025-05-15',
          name: '30',
          desc1: 'xxxx'
        },
        {
          dept: '2025-07-10',
          name: '60',
          desc1: 'xxxx'
        },
        {
          dept: '2025-09-20',
          name: '70',
          desc1: 'xxxx'
        },
        {
          dept: '2025-11-11',
          name: '90',
          desc1: 'xxxx'
        }
      ]
    }
  },
  methods: {
    oldSave() {
      console.log(this.form)
    },
    oldSubt() {
      console.log(this.form)
    },
    ReviseClick(row) {
      console.log(row)
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}
.box >>> textarea {
  background-color: transparent;
}
.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}
#foundation-col {
  padding: 0 10px 20px 10px;
}
#finish-col {
  padding: 0 0 20px 10px;
}
.finish-card {
  height: 545px;
}
.btn-group {
  text-align: right;
}
h2 {
  text-align: center;
}
</style>
